<template>
  <div>
    <el-upload
      drag
      :http-request="checkedFile"
      action="/"
      :multiple="true"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>
    <el-progress
      v-if="isView"
      style="max-width: 360px"
      :text-inside="true"
      :stroke-width="20"
      :percentage="percentage"
    />
  </div>
</template>
<script>
// var tus = require('tus-js-client')
export default {
  props: ["name", "type"],
  data() {
    return {
      upload: null,
      percentage: 0,
      isView: false,
      fileId: null,
      flieType: {
        apk: {
          message: "只能上传APK安装包文件",
          type: ["application/vnd.android.package-archive"],
        },
        img: {
          message: "只能上传PNG,JPEG,JPG图片文件",
          type: ["image/png", "image/jpeg"],
        },
      },
    };
  },
  created() {
    console.log(this.name);
  },
  methods: {
    checkedFile(file) {
      const that = this;
      const arrs = file.file.name.split(".");
      const extension = arrs[arrs.length - 1];
      console.log(file);
      if (that.type === file.file.type) {
        this.isView = true;
        // var upload = new tus.Upload(file.file, {
        //   endpoint: process.env.VUE_APP_BASE_API + '/files/',
        //   retryDelays: [0, 3000, 5000, 10000, 20000],
        //   metadata: {
        //     filename: file.file.name,
        //     filetype: file.file.type
        //   },
        //   onError: function(error) {
        //     console.log('Failed because: ' + error)
        //   },
        //   onProgress: function(bytesUploaded, bytesTotal) {
        //     that.percentage = Number(((bytesUploaded / bytesTotal) * 100).toFixed(2))
        //     console.log(bytesUploaded, bytesTotal, that.percentage + '%')
        //   },
        //   onSuccess: function() {
        //     const arr = upload.url.split('files/')
        //     that.fileId = arr[1]
        //     that.$emit('input', that.name, that.fileId)
        //     that.$emit('input', 'extension', extension)
        //     that.$emit('input', 'name', upload.file.name.split('.')[0])
        //     console.log('value:', that.fileId, upload.file.name.split('.')[0], extension, file.file.type)
        //   }
        // })
        // upload.start()
      } else {
        this.$message({
          message: "只能上传" + that.type + "格式的文件",
        });
        return false;
      }
    },
    captureImage(video) {
      var canvas = document.createElement("canvas"); // 创建一个画布
      canvas.width = video.videoWidth * scale;
      canvas.height = video.videoHeight * scale;
      canvas
        .getContext("2d")
        .drawImage(video, 0, 0, canvas.width, canvas.height); // getContext:设置画布环境；drawImage:画画

      var img = document.createElement("img");
      img.src = canvas.toDataURL("image/png"); // 获取图片的url
      // output.appendChild(img)
      console.log(img);
    },
    beforeAvatarUpload(file) {
      console.log(file.type);

      const isCorrectType = this.flieType[this.type].type.includes(file.type);
      if (!isCorrectType) {
        this.$message.error(this.flieType[this.type].message);
      }
      return isCorrectType;
    },
  },
};
</script>
